<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href="http://openLayers.org/api/theme/default/style.css" type="text/css"/>
<link rel = "stylesheet" href="http://openLayers.org/api/theme/default/google.css" type="text/css"/>
<style type = "text/css">
	#map {
		width : 100%;
		height : 100%;
		border : 1px solid black;
	}
</style>
<script src = "http://openLayers.org/api/OpenLayers.js"></script>
<script type="text/javascript"    src="https://maps.google.com/maps/api/js?sensor=false&language=ko"></script>
<script type = "text/javascript">
	var map;
	var LayerMap;
	var measureControl;
	var zcontrols;
	var element;
	var popup;
	
	function init() {
		map = new OpenLayers.Map('map');
				
		var glod = new OpenLayers.Layer.Google(
				"Google RoadMap",
				{type : google.maps.MapTypeId.ROADMAP
				}
				);
		var gsat = new OpenLayers.Layer.Google(
				"Google Satellite",
				{type : google.maps.MapTypeId.SATELLITE
				}
				);
		var ghyb = new OpenLayers.Layer.Google(
				"Google Hybrid",
				{type : google.maps.MapTypeId.HYBRID
					}
				);
		var gter = new OpenLayers.Layer.Google(
				"Google Terrain",
				{type : google.maps.MapTypeId.TERRAIN
					}
				);
		LayerMap = new OpenLayers.Layer.Vector("Map Layer");
		
		map.addLayers([glod, gsat, ghyb, gter, LayerMap]);
		map.addControl(new OpenLayers.Control.LayerSwitcher());
		map.addControl(new OpenLayers.Control.ScaleLine());
		map.addControl(new OpenLayers.Control.MousePosition());
		map.setCenter(new OpenLayers.LonLat(127.141184176164, 37.4430501005437), 2);
		
		zcontrols = {
				navi : new OpenLayers.Control.Navigation(),
				line : new OpenLayers.Control.DrawFeature(LayerMap, OpenLayers.Handler.Path),
				polygon : new OpenLayers.Control.DrawFeature(LayerMap, OpenLayers.Handler.Polygon),
				point : new OpenLayers.Control.DrawFeature(LayerMap, OpenLayers.Handler.Point),
				regular : new OpenLayers.Control.DrawFeature(LayerMap, OpenLayers.Handler.RegularPolygon,
						{handlerOptions : {sides : 5}}
						),
				area : new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, {
					persist : true
				}),
				distance : new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
					persist : true
				}),
				ZoomBox : new OpenLayers.Control.ZoomBox()
		};
		
		for(var key in zcontrols) {
			if(key == "distance" || key == "area") {
				measureControl = zcontrols[key];
				measureControl.events.on({
					"measure" : handleMeasurements
				});
				map.addControl(measureControl);
			} else {
				map.addControl(zcontrols[key]);
			}
		}
	}
	
	function handleMeasurements(event) {
		var geometry = event.geometry;
		var units = event.units;
		var order = event.order;
		var measure = event.measure;
		element = document.getElementById('output');
		var out = "";
		if(order == 1) {
			out += "거리 : " + measure.toFixed(3) + " " + units;
			if(map.getProjection() == "EPSG:4326") {
				out += "<br /> Great Circle Distance : " + calcVincenty(geometry).toFixed(3) + " km*";
			}
		} else {
			out += "면적 : " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
		}
		popup = new OpenLayers.Popup.FramedCloud("output", 
				map.getLonLatFromPixel(map.getControlsByClass("OpenLayers.Control.MousePosition")[0].lastXy), 
		        null, out, null, true); 
		
		element.popup = popup;
		map.addPopup(popup);
		
		if(map.popups[1] != null) {	
			map.removePopup(map.popups[0]);
		}
	}
	
	function calcVincenty(geometry) {
		var dist = 0;
		for(var i = 1; i < geometry.components.length; i++) {
			var first = geometry.components[i-1];
			var second = geometry.components[i];
			dist += OpenLayers.Util.distVincenty(
					{lon : first.x, lat : first.y},
					{lon : second.x, lat : second.y}
					);
		}
		return dist;
	}
	
	function toggleControl(element) {
		for(key in zcontrols) {
			var control = zcontrols[key];
			if(element.value == key) {
				control.activate();
			} else {
				control.deactivate();
				if(map.popups[0] != null) {
					while(map.popups.length) {
						map.removePopup(map.popups[0]);
					}
				}		
			}
		}
	}
	
	function ZoomBox() {
		zoomBox.activate();
	}
	
	function Restart() {
		LayerMap.removeAllFeatures();
		map.zoomToMaxExtent();
		map.setCenter(new OpenLayers.LonLat(127.141184176164, 37.4430501005437), 2);
		toggleControl('navi');
		if(map.popups[0] != null) {
			while(map.popups.length) {
				map.removePopup(map.popups[0]);
			}
		}		
	}
</script>
</head>
<body onload = "init()">
<table border = "2" cellspacing="5" cellpadding="0" style="border-color : #CCCCFF" width = "100%" height = "80%">
<tr>
<td height = "20">
<div id = "control">
	<input type = "button" name = "navi" value = "navi" onclick = "toggleControl(this)"/>
	<input type = "button" name = "line" value = "line" onclick = "toggleControl(this)"/>
<input type = "button" name = "polygon" value = "polygon" onclick = "toggleControl(this)"/>
<input type = "button" name = "regular" value = "regular" onclick = "toggleControl(this)"/>
<input type = "button" name = "point" value = "point" onclick = "toggleControl(this)"/>
<input type = "button" name = "area" value = "area" onclick = "toggleControl(this)"/>
<input type = "button" name = "distance" value = "distance" onclick = "toggleControl(this)"/>
<input type = "button" name = "Restart" value = "Restart" onclick = "Restart()"/>
<input type = "button" name = "ZoomBox" value = "ZoomBox" onclick = "toggleControl(this)"/>
</div>
<b>Output : </b>
<div id = "output"></div>
</td>
</tr>
<tr>
<td height = "890" align = center>
	<div id = "map" ></div>
	</td>
</tr>
</table>
</body>
</html>